<template style="background-color: #f6f6f6">

    <el-card class="box-card" >

      <template #header>
        <div class="card-header">
          <span>信息管理</span>
          <span style="float: right;">
            <el-input
            style="float: left;width: 200px;"
            v-model="search"
            size="default"
            placeholder="输入关键字搜索"/>
            <el-button @click="initTable"><el-icon><Refresh /></el-icon></el-button>
            <el-button type="primary" plain @click="openAddDialog()">新建高校</el-button>
          </span>
        </div>
      </template>
  
      <div style="height: 90%">
        <el-table v-loading="tableLoading"
        row-key="id" 
        :data="filterData"
        style="width: 100%; height:90%"
        border stripe >
          <el-table-column prop="id" label="高校ID" width="150" align="center"/>
          <el-table-column prop="usci" label="统一社会信用代码" width="200" align="center"/>
          <el-table-column prop="name" label="高校名称" width="150" align="center"/>
          <el-table-column prop="address" label="注册地址" align="center"/>
          <el-table-column prop="phone" label="注册电话" width="150" align="center"/>
          <el-table-column prop="enable" label="当前启用状态"  width="150" align="center">
            <template v-slot="scope">
              <el-tag
                    :type="scope.row.enable === 1 ? 'success':'danger'"
                    disable-transitions
                >{{ scope.row.enable === 1 ? '启用' : '禁用' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="enableDate" label="启用日期" width="150" align="center"/>
          <el-table-column prop="disableDate" label="禁用日期" width="150" align="center"/>
          <el-table-column  label="操作" width="75" align="center">
            <template #default="scope">
              <el-button size="small" type="primary" @click="openEditDialog(scope.row.id)"><el-icon><Edit /></el-icon>编辑</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-dialog
          v-model="editDialogVisible"
          title="编辑高校信息"
          width="40%"
          align-center>

          <el-form :model="form" label-width="140px">
            <el-form-item label="高校名称">
              <el-input v-model="form.name" style="width: 450px;" />
            </el-form-item>
            <el-form-item label="统一社会信用代码">
              <el-input v-model="form.usci" style="width: 450px;" />
            </el-form-item>
            <el-form-item label="注册地址">
              <el-input v-model="form.address" style="width: 450px;"/>
            </el-form-item>
            <el-form-item label="注册电话">
              <el-input v-model="form.phone" style="width: 450px;" />
            </el-form-item>
            <el-form-item label="启用状态">
              <el-select v-model="form.enable" placeholder="状态" :disabled="false" style="width: 450px;" >
                <el-option label="启用" value=1 />
                <el-option label="禁用" value=0 />
              </el-select>
            </el-form-item>

            <el-form-item label="可用日期" style="width: 450px;" >
              <el-col :span="11">
                <el-date-picker
                    v-model="form.enableDate"
                    type="date"
                    placeholder="启用日期"
                    style="width: 100%"
                    :disabled-date="startDisabledDate"
                />
              </el-col>
              <el-col :span="2">
                <span>至</span>
              </el-col>
              <el-col :span="11">
                <el-date-picker
                    v-model="form.disableDate"
                    placeholder="禁用日期"
                    type="date"
                    style="width: 100%"
                    :disabled-date="endDisabledDate"
                />
              </el-col>
            </el-form-item>
          </el-form>

            <template #footer>
              <span class="dialog-footer">
                  <el-button @click="editDialogVisible = false">取消</el-button>
                  <el-button 
                    v-loading.fullscreen.lock="uploadLoading"
                    type="primary" @click="confirmEditDialog()">
                    确认
                  </el-button>
              </span>
            </template>
         </el-dialog>
         <el-dialog
          v-model="addDialogVisible"
          title="新建高校"
          width="35%"
          align-center>

            <el-form :model="form" label-width="140px">
              <el-form-item label="高校名称">
                <el-input v-model="form.name" style="width: 450px;" />
              </el-form-item>
              <el-form-item label="统一社会信用代码">
                <el-input v-model="form.usci" style="width: 450px;" />
              </el-form-item>
              <el-form-item label="注册地址">
                <el-input v-model="form.address" style="width: 450px;"/>
              </el-form-item>
              <el-form-item label="注册电话">
                <el-input v-model="form.phone" style="width: 450px;" />
              </el-form-item>
<!--              <el-form-item label="启用状态">
                <el-select v-model="form.enable" placeholder="状态" :disabled="false" style="width: 450px;" >
                  <el-option label="启用" value="0" />
                  <el-option label="禁用" value="1" />
                </el-select>
              </el-form-item>-->

              <el-form-item label="可用日期" style="width: 450px;" >
                <el-col :span="11">
                  <el-date-picker
                    v-model="form.enableDate"
                    type="date"
                    placeholder="启用日期"
                    style="width: 100%"
                    :disabled-date="startDisabledDate"
                  />
                </el-col>
                <el-col :span="2">
                  <span>至</span>
                </el-col>
                <el-col :span="11">
                  <el-date-picker
                    v-model="form.disableDate"
                    placeholder="禁用日期"
                    type="date"
                    style="width: 100%"
                    :disabled-date="endDisabledDate"
                  />
                </el-col>
              </el-form-item>
            </el-form>

            <template #footer>
              <span class="dialog-footer">
                  <el-button @click="addDialogVisible = false">取消</el-button>
                  <el-button 
                    v-loading.fullscreen.lock="uploadLoading"
                    type="primary" @click="confirmAddDialog()">
                    确认
                  </el-button>
              </span>
            </template>
         </el-dialog>
  
        <el-pagination
          :small="true"
          :disabled="false"
          :background="true"
          layout="prev, pager, next"
          @change="initTable"
          v-model:current-page="current"
          :page-count="pageCount"
        />
        
      </div>
  
    </el-card>
  
  </template>
  
  <script >

  import moment from 'moment';
  import { ElMessage } from 'element-plus'
  import {Edit, Refresh} from "@element-plus/icons-vue";
  export default {
    components: {Edit, Refresh},
    data(){
        return{
          current:1,
          pageCount:0,
          tableData :[],
          tableLoading:false,
          uploadLoading:false,
          search:'',
          editDialogVisible:false,
          addDialogVisible:false,
          form:{
            id:'',
            name:'',
            usci:'',
            address:'',
            phone:'',
            enable:'',
            enableDate: '',
            disableDate: ''
          }
        }
    },
    computed:{
      filterData(){
        return this.tableData.filter((data) => {
          return !this.search || data.name!=null&&data.name.toLowerCase().includes(this.search.toLowerCase())||data.id===this.search;
        });
      }
    },
    methods : {
      startDisabledDate(date){
        return date.getTime()<Date.now();
      },
      endDisabledDate(date){
        return date.getTime()<Date.now()||date.getTime()<this.form.enableDate;
      },
      openEditDialog(id){
        this.uploadLoading=true;
        this.$http.get("/user/university/id?id="+id)
        .then((response) => {
          this.form=response.data.data;
          this.form.enableDate=moment(this.form.enableDate).format('YYYY-MM-DD');
          this.form.disableDate=moment(this.form.disableDate).format('YYYY-MM-DD');
          this.form.enable=""+this.form.enable;
          this.editDialogVisible=true;
        });
        this.uploadLoading=false;
      },
      openAddDialog(){
        this.form={
          name: '',
          usci: '',
          address: '',
          phone: '',
          enable: '1',
          enableDate: '',
          disableDate: ''
        }
        this.addDialogVisible=true;
      },
      confirmEditDialog(){
        this.uploadLoading=true;
        let universityVo = {
          id: this.form.id,
          name: this.form.name,
          usci: this.form.usci,
          address: this.form.address,
          phone: this.form.phone,
          enable: this.form.enable,
          enableDate: moment(this.form.enableDate).format('YYYY-MM-DD'),
          disableDate: moment(this.form.disableDate).format('YYYY-MM-DD')
        }
        this.$http.post("/user/university/change",universityVo)
          .then((response) => {
              this.uploadLoading=false;
              if(response.data.code===200){
                  this.initTable();
                  this.editDialogVisible = false
                  ElMessage({ message: '修改成功！', type: 'success' });
              }
              else {
                  ElMessage.error(response.data.msg);
              }
          })
      },
      confirmAddDialog(){
        this.uploadLoading=true;
        let universityVo = {
          name: this.form.name,
          usci: this.form.usci,
          address: this.form.address,
          phone: this.form.phone,
          enable: this.form.enable,
          enableDate: moment(this.form.enableDate).format('YYYY-MM-DD'),
          disableDate: moment(this.form.disableDate).format('YYYY-MM-DD')
        }
        this.$http.post("/user/university/create",universityVo)
          .then((response) => {
              this.uploadLoading=false;
              if(response.data.code===200){
                this.initTable();
                this.addDialogVisible = false
                ElMessage({ message: '添加成功！', type: 'success' });
              }
              else {
                ElMessage.error(response.data.msg);
              }
          })
      },
      initTable(){
        this.tableLoading=true;
        this.$http.get("/user/university/list",{
            page: 1,
            size: 10,
            sortFieId: 'id',
            isASC: 'true'
        }).then((response) => {
          console.log(response);
          if(response.data.code===200){
            this.tableData=response.data.data.records;
            this.pageCount=response.data.data.pages;
            for(let i=0;i<this.tableData.length;i++){
              this.tableData[i].enableDate=moment(this.tableData[i].enableDate).format('YYYY-MM-DD');
              this.tableData[i].disableDate=moment(this.tableData[i].disableDate).format('YYYY-MM-DD');
            }
            this.tableLoading=false;
          }
        });
      }
    },
    mounted(){
      this.initTable();
    }
  }
  </script>
  
  <style scoped>
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .box-card {
    height: 94%;
  }
  </style>